<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩分析</title>
</head>

<!--刘艺广-->
<style>
   #scoreTab{
       margin-top: 60px;
       width: 90%;
       text-align: center;
   }
    #scoreDiv{
        width: 1234px;
        margin: 0 auto;
    }
    #header{
        margin-top: 50px;
        margin-left: 30px;
    }
    td{
        padding-top: 20px;
    }
    select{
        height: 30px;
        width: 150px;
    }
    option{
        text-align: center;
        font-size: 20px;
        height: 30px;
        width: 150px;
    }
    body{
        background-color:#D1EEEE;
        /*background: url("/image/beijing.png");*/
    }
</style>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<body>

<div id="header">
<select name="gradeSelect" id="gradeSelect">
    <option value="0">--请选择年级--</option>
</select>
<select name="yxSelect" id="yxSelect">
    <option value="0">--请选择院系--</option>
</select>
<select name="zySelect" id="zySelect">
    <option value="0">--请选择专业--</option>
</select>
</div>
<hr/>
<div id="scoreDiv">
<table id="scoreTab">
    <tr id="tabHeader">
        <th>年级</th>
        <th>院系</th>
        <th>专业</th>
        <th>班级</th>
        <th>学号</th>
        <th>姓名</th>
        <th>考试</th>
        <th>成绩</th>
    </tr>

</table>
    </div>
<script>
    $(function () {

        //页面初始化，下拉列表只有年级可以选择
        $.ajax({
            type: "post",
            url: "ShowGradeServlet",
            dataType: "JSON",
            success: function (data) {
                //把年级添加到下拉列
                $.each(data, function (index, obj) {
                    var $gradeOption = "<option value='" + obj.gId + "'>" + obj.gId + "</option>";
                    $("#gradeSelect").append($gradeOption);
                });
            }
        });

        //选择年级触发change事件
        $("#gradeSelect").change(function () {
            $.ajax({
                type: "post",
                url: "ScoreFenXiServlet",
                data: {
                    gId: $("#gradeSelect").val(),
                    yId: $("#yxSelect").val(),
                    zId: $("#zySelect").val()
                },
                dataType: "JSON",
                success: function (data) {
                    console.log(data);
                    //每次选择年级先清空院校列表
                    $("#yxSelect").find("option[class='yxoption']").remove();
                    //专业列表也要清空
                    $("#zySelect").find("option[class='zyoption']").remove();
                    //每次选择年级先清空成绩列表
                    $("#scoreTab").find("tr[class='scoreTr']").remove();
                    
                    if (data !=null) {
                        //把院系添加到下拉列表
                        $.each(data.yxList, function (index, obj) {
                            var $yxOption = "<option value='" + obj.yId + "' class='yxoption'>" + obj.yName + "</option>";
                            $("#yxSelect").append($yxOption);
                        });

                        //显示成绩
                        $.each(data.scoreList, function (index, obj) {
                            var $scoreTr = "<tr class='scoreTr'>" +
                                "<td>" + obj.student.gid + "</td>" +
                                "<td>" + obj.student.yx.yName + "</td>" +
                                "<td>" + obj.student.zy.zName + "</td>" +
                                "<td>" + obj.student.cl.cName + "</td>" +
                                "<td>" + obj.student.sId + "</td>" +
                                "<td>" + obj.student.sName + "</td>" +
                                "<td>" + obj.exam.eName + "</td>" +
                                "<td>" + obj.cj + "</td>" +
                                "</tr>";
                            $("#scoreTab").append($scoreTr);
                        })
                    }
                }
            });
        });

        //选择院系触发change事件
        $("#yxSelect").change(function () {
            $.ajax({
                type: "post",
                url: "ScoreFenXiServlet",
                data: {
                    gId: $("#gradeSelect").val(),
                    yId: $("#yxSelect").val(),
                    zId: $("#zySelect").val()
                },
                dataType: "JSON",
                success: function (data2) {
                    //每次选择院系先清空专业列表
                    $("#zySelect").find("option[class='zyoption']").remove();
                    //每次选择院系先清空成绩列表
                    $("#scoreTab").find("tr[class='scoreTr']").remove();
                    //把专业添加到下拉列表
                    if (data2.zyList != null) {
                        $.each(data2.zyList, function (index, obj) {
                            var $zyOption = "<option value='" + obj.zId + "' class='zyoption'>" + obj.zName + "</option>";
                            $("#zySelect").append($zyOption);
                        });
                    }
                    //显示成绩
                    $.each(data2.scoreList, function (index, obj) {
                        var $scoreTr = "<tr class='scoreTr'>" +
                            "<td>" + obj.student.gid + "</td>" +
                            "<td>" + obj.student.yx.yName + "</td>" +
                            "<td>" + obj.student.zy.zName + "</td>" +
                            "<td>" + obj.student.cl.cName + "</td>" +
                            "<td>" + obj.student.sId + "</td>" +
                            "<td>" + obj.student.sName + "</td>" +
                            "<td>" + obj.exam.eName + "</td>" +
                            "<td>" + obj.cj + "</td>" +
                            "</tr>";
                        $("#scoreTab").append($scoreTr);
                    })


                }
            });
        });

        //选择专业触发change事件
        $("#zySelect").change(function () {
            $.ajax({
                type: "post",
                url: "ScoreFenXiServlet",
                data: {
                    gId: $("#gradeSelect").val(),
                    yId: $("#yxSelect").val(),
                    zId: $("#zySelect").val()
                },
                dataType: "JSON",
                success: function (data3) {
                    //每次选择院系先清空成绩列表
                    $("#scoreTab").find("tr[class='scoreTr']").remove();
                    //显示成绩
                    if (data3.scoreList != null) {
                        $.each(data3.scoreList, function (index, obj) {
                            var $scoreTr = "<tr class='scoreTr'>" +
                                "<td>" + obj.student.gid + "</td>" +
                                "<td>" + obj.student.yx.yName + "</td>" +
                                "<td>" + obj.student.zy.zName + "</td>" +
                                "<td>" + obj.student.cl.cName + "</td>" +
                                "<td>" + obj.student.sId + "</td>" +
                                "<td>" + obj.student.sName + "</td>" +
                                "<td>" + obj.exam.eName + "</td>" +
                                "<td>" + obj.cj + "</td>" +
                                "</tr>";
                            $("#scoreTab").append($scoreTr);
                        })
                    }
                }
            });
        });
    });
</script>
</body>
</html>